/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState } from 'react';
import { connect } from 'dva';
import { Checkbox, Form, Input, Modal } from 'antd';

const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
  },
};

const checkboxLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
  },
};

const AddStation = props => {
  const { form, isYz, currentStation = {} } = props;
  const { getFieldDecorator, setFieldsValue } = form;
  const {
    site_name = '',
    site_charge = '',
    site_phone = '',
    is_inn_area = false,
    is_gp_area = false,
  } = currentStation || {};
  const nameKey = isYz ? '片区' : '站点';
  const [formValue, setFormValue] = useState(currentStation);

  const checkForm = name =>
    new Promise((resolve, reject) => {
      const values = form.getFieldValue(name);
      const text = values ? '开启' : '关闭';
      switch (name) {
        case 'is_inn_area':
          if (!values) {
            Modal.confirm({
              title: '提示',
              cancelText: '取消',
              okText: '确认关闭',
              content:
                '关闭驿站独立片区管理权限后，该片区下的驿站将全部转移至加盟商层级，清确认是否关闭！',
              onCancel: () => {
                setFieldsValue({
                  [name]: true,
                });
                reject();
              },
              onOk: () => {
                resolve();
              },
            });
          } else {
            setFormValue({ ...formValue, [name]: values });
          }
          break;
        case 'is_gp_area':
          Modal.confirm({
            title: '提示',
            cancelText: '取消',
            okText: `确认${text}`,
            content: `${text}共配独立片区管理权限后，该片区下的业务员巴枪信息将全部清空，请确认是否${text}`,
            onCancel: () => {
              setFieldsValue({
                [name]: !values,
              });
              reject();
            },
            onOk: () => {
              resolve();
            },
          });
          break;
        default:
          break;
      }
    });

  const onChange = async name => {
    const values = form.getFieldValue(name);
    try {
      await checkForm(name);
      setFormValue({ ...formValue, [name]: values });
    } catch (err) {
      console.log(err);
    }
  };

  const columns = [
    {
      label: `${nameKey}名称`,
      name: 'name',
      options: {
        initialValue: site_name,
        rules: [
          {
            required: true,
            message: `请输入${nameKey}名称`,
          },
          {
            pattern: /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_]){2,20}$/,
            message: '请输入2-20位中文、英文或数字字符！',
          },
        ],
      },
      render: <Input type="text" placeholder={`请输入${nameKey}名称`} />,
      show: true,
    },
    {
      label: `${nameKey}负责人`,
      name: 'charge',
      options: {
        initialValue: site_charge,
        rules: [
          {
            required: true,
            message: `请输入${nameKey}负责人`,
          },
          {
            pattern: /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_]){2,20}$/,
            message: '请输入2-20位中文、英文或数字字符！',
          },
        ],
      },
      render: <Input type="text" placeholder={`请输入${nameKey}负责人`} />,
      show: true,
    },
    {
      label: '负责人手机号',
      name: 'phone',
      options: {
        initialValue: site_phone,
        rules: [
          {
            required: true,
            message: '请输入负责人手机号',
          },
          {
            pattern: /^(0|86|17951)?1[0-9]{10}$/,
            message: '手机号格式错误！',
          },
        ],
        validateTrigger: 'onBlur',
      },
      render: <Input type="text" placeholder="请输入负责人手机号" />,
      show: true,
    },
    {
      label: ' ',
      name: 'is_inn_area',
      options: {
        initialValue: is_inn_area,
      },
      render: <Checkbox checked={formValue.is_inn_area}>开启驿站片区管理</Checkbox>,
      layout: checkboxLayout,
      onChange: onChange.bind(null, 'is_inn_area'),
      show: isYz,
    },
    {
      label: ' ',
      name: 'is_gp_area',
      options: {
        initialValue: is_gp_area,
      },
      render: <Checkbox checked={formValue.is_gp_area}>开启共配独立片区管理权限</Checkbox>,
      layout: checkboxLayout,
      onChange: onChange.bind(null, 'is_gp_area'),
      show: isYz,
    },
  ];

  return (
    <Form colon={false}>
      {columns.filter(v => v.show).map(item => (
        <FormItem {...item.layout || formItemLayout} key={item.name} {...item}>
          {getFieldDecorator(item.name, {
            ...item.options,
          })(item.render)}
        </FormItem>
      ))}
    </Form>
  );
};

export default connect(({ setting }) => ({
  isYz: setting?.options?.key === 'yz',
}))(AddStation);
